<script lang="ts">
import type { SkillQueue, SkillSet } from "@store/utils/type.ts"
import SkillIcon from "./skill-icon.vue"

export default {
  components: { SkillIcon },
  props: {
    character: {
      type: [Object]
    }
  },
  data() {
    return {
      skills: [],
      skill2: [],
      current: {},
      skillPanel: [
        [
          { k: "Q" }, { k: "W" }, { k: "E" },
          { k: "R" }, { k: "T" }, { k: "Y" }, { k: "Ctrl" }
        ],
        [
          { k: "A" }, { k: "S" }, { k: "D" },
          { k: "F" }, { k: "G" }, { k: "H" }, { k: "Alt" }
        ]
      ],
      sfskills: [],
      setmode: true
    }
  },
  computed: {
  },
  watch: {
    character() {
      this.init()
    }
  },
  mounted() {
    // this.init();
    for (const sps of this.skillPanel) {
      for (const sp of sps) {
        sp.skill = null
        sp.showInfos = false
      }
    }
  },
  methods: {
    getSet() {
      const skills: SkillSet[] = []
      const queue: SkillQueue[] = []
      const hotkey: string[] = []

      for (var skill of this.character.skills) {
        skills.push({
          // 技能名
          name: skill.name,
          // 技能等级
          level: skill.current_level,
          // tp
          tp: skill.tp_level ?? 0,
          // 是否手搓
          direct: skill.useSc === 1,
          // 方向键数目
          directNumber: skill.useSc === 0 ? 0 : skill.scCount,
          // 技能次数
          count: 0,
          // 宠物次数
          pet: 0,
          // 是否有伤害
          damage: skill.type === 1,
          mode: []
        })
      }

      for (var skill of this.sfskills) {
        queue.push({
          name: skill.name,
          mode: null,
          modes: []
        })
      }
      for (const panel of this.skillPanel) {
        for (const item of panel) {
          hotkey.push(item.skill?.name ?? "")
        }
      }

      return { skill_set: skills, skill_que: queue, hotkey_set: hotkey }
    },
    init() {
      for (const skill of this.character.skills) {
        skill.kjjType = 0
      }

      this.skills = this.character.skills.filter(x => x.type === 1)
      this.skill2 = this.character.skills.filter(x => x.type === 0)
    },
    selectSkill(skill) {
      this.current = skill
    },
    bindSkill(key, skill) {
      key.skill = skill
      key.showInfos = false
    },
    selectKey(key) {
      if (this.setmode) {
        key.showInfos = true
      } else if (key.skill) {
        this.sfskills.push(key.skill)
      }
    },
    removeSkill(index) {
      this.sfskills.splice(index, 1)
    }
  }
}
</script>

<template>
  <view class="calc-skills">
    <view class="skill-box">
      <view class="title">
        主动技能 (点击图标调整)
      </view>
      <view class="skill-icons">
        <SkillIcon
          v-for="(skill, i) in skills" :key="i" class="skill-icon"
          :skill="skill" :role="character.alter" use-set
          :class="{ current: current.name === skill.name }" @select="selectSkill(skill)"
        />
      </view>
    </view>
    <view class="skill-box">
      <view class="title">
        被动技能 (点击图标调整)
      </view>
      <view class="skill-icons">
        <SkillIcon
          v-for="(skill, i) in skill2" :key="i" class="skill-icon"
          :skill="skill" :role="character.alter" use-set
          :class="{ current: current.name === skill.name }" @select="selectSkill(skill)"
        />
      </view>
    </view>
    <view class="skill-box">
      <view class="title">
        <view class="">
          技能快捷栏
        </view>
        <view class="title-right-mode" @click="setmode = !setmode">
          <uni-icons v-if="!setmode" class="icon" color="#dbbf94" type="circle" size="17" />
          <uni-icons v-else class="icon" color="#dbbf94" type="checkbox" size="17" />
          <text style="margin-left: 5px;">
            设置模式
          </text>
        </view>
      </view>
      <view class="skill-kbox">
        <view v-for="(k, j) in skillPanel" :key="j" class="skill-ks">
          <view v-for="(key, i) in k" :key="i" class="kskill-icon-box" @click.stop="selectKey(key)">
            <view class="kskill-icon-inner">
              <SkillIcon v-if="key.skill" class="skill-icon" :skill="key.skill" :role="character.alter" @select="selectKey(key)" />
              <view v-else class="kskill-icon" />
              <view class="skill-k">
                {{ key.k }}
              </view>
            </view>
            <view v-if="key.showInfos" class="skill-infos">
              <view class="skill-infos-mask" @click.stop="key.showInfos = false" />
              <view class="skill-icons">
                <SkillIcon
                  v-for="(skill, ii) in skills" :key="ii" class="skill-icon"
                  :skill="skill" :role="character.alter" @select="bindSkill(key, skill)"
                />
                <view class="kskill-icon" @click.stop="bindSkill(key, null)" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="skill-box">
      <view class="title">
        技能施放队列（点击快捷栏技能添加）
      </view>
      <view class="skill-kbox mh">
        <view class="skill-ks">
          <SkillIcon
            v-for="(skill, i) in sfskills" :key="i" class="skill-icon"
            :skill="skill" :role="character.alter" @select="removeSkill(i)"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.calc-skills {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #000;

  .skill-box {
    margin-top: 10px;
    width: 100%;

    .title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: linear-gradient(to top,#1B120B,#413124);
      color: #dbbf94;
      font-size: 14px;
      position: relative;

      .title-right-mode {
        position: absolute;
        right: 12px;
        top: 0;
        line-height: 26px;

        .icon {
          position: relative;
          top: 2px;
        }
      }
    }

    .skill-icons {
      display: flex;
      flex-wrap: wrap;
      padding: 8px 8px 0;
      border: 1px solid #413124;
      border-top: none;

      .skill-icon {

        &.current {
          border-color: #5BE3FF;
        }
      }
    }

    .skill-kbox {
      padding: 8px 8px 0;
      border: 1px solid #413124;
      border-top: none;

      &.mh {
        min-height: 280px;
      }

      .skill-ks {
        display: flex;
        flex-wrap: wrap;

        .kskill-icon-box {
          width: 36px;
          height: 36px;
          margin: 0 8px 8px 0;

          .skill-k {
            position: absolute;
            bottom: 1px;
            right: 3px;
            text-align: right;
            font-size: 12px;
            text-shadow: 2px 0 1px #000, -2px 0 1px #000, 0 2px 1px #000, 0 -2px 1px #000;
            color: rgb(233, 197, 88);
          }

          .kskill-icon-inner {
            position: relative;
          }

          .kskill-icon {
            width: 36px;
            height: 36px;
            overflow: hidden;
            margin: 0 8px 8px 0;
            border: 1px solid #4A4A4A;
          }

          .skill-infos {
            position: absolute;
            left: 10px;
            width: 665rpx;
            border: 1px #4A4A4A solid;
            background-color: #303030;
            padding: 10px;
            z-index: 100;
            color: #CCC;

            .skill-infos-mask {
              position: fixed;
              width: 100%;
              height: 100%;
              // background-color: rgba(233, 197, 88, 0.9);
              top: 0;
              left: 0;
              z-index: -1;
            }
          }
        }
      }
    }
  }

}
</style>
